<template>
  <div class="subject-add">
    <div class="title">
      <div class="block"></div>
      <div class="word">编辑专业信息</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="subject-edit-content">
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <div class="topbox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>基本信息</span>
            </div>
            <el-form-item label="专业中文名称:" prop="majorCName">
              <el-input v-model="ruleForm.majorCName"></el-input>
            </el-form-item>

            <el-form-item label="专业英文名称:" prop="majorEName">
              <el-input v-model="ruleForm.majorEName"></el-input>
            </el-form-item>
            <el-form-item label="所属学校:" prop="selectSchool">
              <div @click="dialog2Visible = true">
                <el-input v-model="school" placeholder="请输入内容"></el-input>
              </div>
              <el-dialog
                title="关联学校"
                :visible.sync="dialog2Visible"
                width="40%"
                @close="closeFun()"
              >
                <el-form
                  style="width: 500px"
                  :inline="true"
                  label-width="100px"
                >
                  <el-form-item class="el-form-item" label="请选择学校:">
                    <el-input
                      class="el-input"
                      v-model.trim="formInline_school.name"
                      placeholder="编号/学校名称"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-button @click="getSearchSchoolList">搜索</el-button>
                  </el-form-item>
                </el-form>
                <div style="margin-left: 20px; margin-top: 20px">
                  <el-table
                    class="el-table"
                    ref="multipleTable"
                    :data="schoolData"
                    @select="select"
                    @select-all="selectAll"
                    border
                    style="width: 100%"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="schoolId" label="学校编号">
                    </el-table-column>
                    <el-table-column prop="schoolCName" label="学校中文名称">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="bottom">
                  <paging
                    class="paging"
                    :total="school_total"
                    @size="size"
                    @currentpage="currentpage"
                  ></paging>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialog2Visible = false">取 消</el-button>
                  <el-button type="primary" @click="commitSchool"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </el-form-item>

            <el-form-item label="学制(年):" prop="educationalSystem">
              <el-input v-model="ruleForm.educationalSystem"></el-input>
            </el-form-item>

            <el-form-item label="国际生比例:" prop="proportion">
              <el-input v-model="ruleForm.proportion"></el-input>
            </el-form-item>

            <el-form-item label="费用(英镑):" prop="tuition">
              <el-input v-model="ruleForm.tuition"></el-input>
            </el-form-item>
          </div>

          <div class="midbox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>申请要求</span>
            </div>
            <el-form-item
              label-width="150px"
              :label="'核心课程'"
              :rules="{
                required: true,
                message: '课程名不能为空',
                trigger: 'blur',
              }"
            >
              <div
                class="addOrDeleteSubject"
                v-for="(subject, index) in dynamicValidateForm.subject"
                :key="index"
              >
                <el-input class="input" v-model="subject.core"></el-input>
                <el-button @click.prevent="removeSubject(subject)"
                  >删除</el-button
                >
              </div>
              <!-- <el-input v-model="subject.value"></el-input> -->
            </el-form-item>
            <el-form-item>
              <el-button @click="addSubject">添加</el-button>
            </el-form-item>
          </div>

          <div class="bottombox">
            <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>录取标准</span>
            </div>
            <quill-editor
              class="quill-editor"
              ref="quillEditor"
              v-model="standard"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            ></quill-editor>
          </div>

          <div class="bottombox">
            <!-- <div class="tipsbox">
              <img class="tips" src="@/assets/index/school/box.svg" alt="" />
              <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
              <span>可申请学校信息</span>
            </div> -->
            <!-- <div class="major_box">
              <el-table
                class="el-table"
                ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="schoolId" label="编号">
                </el-table-column>
                <el-table-column prop="school" label="学校名称">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="goDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
            <!-- <div>
              <el-button class="add_button" @click="add">添加</el-button>

              <el-dialog
                title="关联学校"
                :visible.sync="dialog1Visible"
                width="40%"
                @close="closeFun()"
              >
                <div>
                  <el-form :inline="true" label-width="60px">
                    <el-form-item class="el-form-item" label="请输入:">
                      <el-input
                        class="el-input"
                        v-model.trim="formInline.id"
                        placeholder="编号/学校名称"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-button @click="getSearchList">搜索</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div style="margin-left: 20px">
                  <el-table
                    class="el-table"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    style="width: 100%"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="schoolId" label="编号">
                    </el-table-column>
                    <el-table-column prop="school" label="学校名称">
                    </el-table-column>
                  </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialog1Visible = false">取 消</el-button>
                  <el-button type="primary" @click="dialog1Visible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div> -->
          </div>
        </el-form>
        <div class="buttonbox">
          <el-button class="cancel" @click="cancel">取消</el-button>
          <el-button class="save" @click="save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addQuillTitle } from "@/utils/quill-title.js";

import {
  getSubjectInfo,
  getAllSubject,
  updateMajor,
  getSchoolList,
} from "../../../api";

import qs from "qs";
import paging from "../../../component/paging/paging.vue";
export default {
  inject: ["reload"],
  name: "subjectAdd",
  components: {
    paging, //分页组件
  },
  data() {
    return {
      current: "",
      pagesize: "",
      school_total: 0, //学校列表多少条数据
      school: "", //所属学校
      total: 0, //一共多少条数据
      mid: "", //专业id
      content: "",
      standard: "", //录取标准
      schoolData: [],
      tableData: [],
      dialog1Visible: false,
      dialog2Visible: false,
      formInline: {
        id: "",
      },
      formInline_school: {
        name: "",
      },
      ruleForm: {
        majorEName: "",
        majorCName: "",
        school: "",
        educationalSystem: "",
        proportion: "",
        tuition: "",
        dialogImageUrl: "",
        dialogVisible: false,
        selectSchool: "",
      },
      rules: {
        majorCName: [
          { required: true, message: "请输入专业中文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        majorEName: [
          { required: true, message: "请输入专业英文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        tuition: [
          { required: true, message: "请输入费用", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        selectSchool: [
          { required: true, message: "请选择学校", trigger: "blur" },
        ],
        proportion: [
          { required: true, message: "请输入国际生比例", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        educationalSystem: [
          { required: true, message: "请输入学年", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      dynamicValidateForm: {
        subject: [],
      },
      options: [],
    };
  },

  mounted() {
    this.$emit("routeName", "subjectEdit");
    console.log(this.$route.params.val);
    this.school = this.$route.params.val.school;
    if (this.$route.params.val.mid) {
      this.mid = this.$route.params.val.mid;
      getSubjectInfo(this.mid).then((res) => {
        const data = res.data;
        console.log(data);
        this.ruleForm.majorCName = data.majorCName;
        this.ruleForm.majorEName = data.majorEName;
        this.ruleForm.educationalSystem = data.educationalSystem;
        this.ruleForm.tuition = data.tuition;
        this.ruleForm.proportion = data.proportion;
        for (let i = 0; i < data.core.split(",").length; i++) {
          this.dynamicValidateForm.subject.push({
            core: data.core.split(",")[i],
          });
        }

        // for (let i = 0; i < data.school.split(",").length; i++) {
        //   this.option.push({
        //     value: `选项${i+1}`,
        //     label: data.school
        //   });
        // }
        this.school = data.school;
        this.options.push({
          label: data.school,
        });
        this.standard = data.standard;
      });
    }
    addQuillTitle();
    this.getList();
  },

  methods: {
    getList() {
      getAllSubject(this.current, this.pagesize).then((data) => {
        console.log(data.data);
        this.tableData = data.data.records;
        this.total = data.data.total;
        // console.log(data);
        let arr = [];
        for (let i = 0; i < data.data.total; i++) {
          if (data.data.records[i]) {
            // console.log(data.data.records[i]);
            arr.push(data.data.records[i].school);
          }
        }
        let arr2 = arr.filter(function (e, i) {
          return arr.indexOf(e) === i;
        });

        for (let i = 0; i < arr2.length; i++) {
          this.options.push({
            label: arr2[i],
          });
        }
      });
      getSchoolList(
        this.formInline_school.name,
        this.current,
        this.pagesize
      ).then((data) => {
        console.log(data.data);
        this.schoolData = data.data.schoolList;
        this.school_total = data.data.total;
        // console.log(data);
      });
    },
    getSearchSchoolList() {
      this.current = "";
      this.pagesize = "";
      this.getList();
      // console.log(111);
    },
    commitSchool() {
      this.dialog2Visible = false;
      this.school = this.$refs.multipleTable.selection[0].schoolCName;
    },
    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1;
      }
    },
    removeSubject(item) {
      var index = this.dynamicValidateForm.subject.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.subject.splice(index, 1);
      }
    },
    currentpage(val) {
      // console.log(val);
      this.current = val; //得到新的当前页
      this.getList(); //获取新的数据列表
    },
    size(val) {
      // console.log(val);
      this.pagesize = val; //得到新当前页的一共几行数据
      this.getList(); //获取新的数据列表
    },
    addSubject() {
      this.dynamicValidateForm.subject.push({});
    },
    add() {
      this.dialog1Visible = true;
    },
    closeFun() {
      //重置form表单
      // this.getList();
      // this.formInline = {}
      // this.$refs['formInline_skill'].resetFields();
      // this.$refs['multipleTable'].clearSelection();
    },
    refresh() {
      this.reload();
    },
    goDelete(val) {
      console.log(val.mid);
    },
    cancel() {},
    save() {
      let core = [];
      for (let i = 0; i < this.dynamicValidateForm.subject.length; i++) {
        core.push(this.dynamicValidateForm.subject[i].core);
      }
      let data = qs.stringify({
        aaa: "",
        mid: this.mid,
        majorCName: this.ruleForm.majorCName,
        majorEName: this.ruleForm.majorEName,
        educationalSystem: this.ruleForm.educationalSystem,
        tuition: this.ruleForm.tuition,
        standard: this.standard,
        core: core,
        proportion: this.ruleForm.proportion,
        school: this.school,
        bbb: "",
      });

      updateMajor(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "更新专业信息成功",
            type: "success",
          });
        } else {
          this.$message.error("更新专业信息失败");
        }
      });
    },
    onEditorFocus(val, editor) {
      // 富文本获得焦点时的事件
      // console.log(val); // 富文本获得焦点时的内容
      // editor.enable(false); // 在获取焦点的时候禁用
    },
    onEditorBlur(val) {
      // 富文本失去焦点时的事件
      // console.log(val); // 富文本失去焦点时的内容
      // console.log(val.root.innerText);
      this.standard = val.root.innerText;
    },
    onEditorChange(val) {
      // 富文本内容改变时的事件
      // console.log(val.quill.root.innerText); // 富文本改变时的内容
      this.standard = val.quill.root.innerText;
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.add_button {
  margin-top: 20px;
}
.major_box {
  width: 600px;
}
.subject-edit-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 80%;
  margin-left: 10%;
}
.bottom {
  text-align: center;
  margin-top: 20px;
}
.form {
  position: relative;
  width: 80%;
  margin-left: 10%;
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 150px;
}

.el-form {
  width: 400px;
  margin-left: 15%;
  /* transform: translateX(-70%); */
}

.topbox,
.midbox,
.bottombox {
  position: relative;
}

.bottombox {
  height: 500px;
}
.tipsbox {
  position: relative;
}

.tipsbox .tips {
  position: absolute;
  left: -300px;
  top: 20px;
}

.tipsbox .logo {
  position: absolute;
  left: -280px;
  top: 38px;
}

.tipsbox span {
  position: absolute;
  font-weight: 700;
  color: #fff;
  left: -255px;
  top: 36px;
}

.quill-editor {
  width: 600px;
  height: 300px;
  margin-left: 10%;
}

.buttonbox {
  display: flex;
  margin-left: 50%;
  /* margin-top: 50px; */
  transform: translateX(-30%);
}

.addOrDeleteSubject {
  display: flex;
  margin-bottom: 10px;
}

.input {
  margin-right: 20px;
}

.cancel {
  width: 200px;
  border: 1px solid #44c8ae;
  color: #44c8ae;
  font-size: 16px;
}
.save {
  width: 200px;
  font-size: 16px;
  margin-left: 50px;
  border: 1px solid #1abc9c;
  background-color: #1abc9c;
  color: #fff;
}
</style>
